<template>
  <mu-flex direction="column" style="height: 100%;">
    <!--顶部-->
    <MainHeader :repair="true"/>

    <mu-flex fill class="full" ref="container">
      <div class="loadmore-content">
        <div class="empty" v-if="myRepairs.length <= 0">
          暂无报修记录
        </div>
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <mu-list style="padding: 5px 2px;">
            <template v-for="(rp, i) in myRepairs">
              <mu-paper :z-depth="2" style="margin-bottom: 5px" @click="$router.push({path: 'show', query: {type: 'my', id: rp.id}})">
                <mu-list-item avatar style="padding: 8px 0;">
                  <mu-list-item-content>
                    <mu-list-item-title>{{rp.name}}：{{rp.tel}}</mu-list-item-title>
                    <mu-list-item-sub-title>{{rp.explains}}</mu-list-item-sub-title>
                  </mu-list-item-content>
                  <mu-list-item-action>
                    <mu-badge :content="rp.status" :color="color(rp.status)"></mu-badge>
                    <mu-list-item-after-text style="font-size: 10px;">2019-05-20 22:10</mu-list-item-after-text>
                  </mu-list-item-action>
                </mu-list-item>
              </mu-paper>
            </template>
          </mu-list>
        </mu-load-more>
      </div>
    </mu-flex>
  </mu-flex>
</template>

<script>
  import MainHeader from './MainHeader'
  import {mapState, mapActions} from 'vuex'

  export default {
    name: "myrepairs",
    components: {
      MainHeader
    },
    data() {
      return {
        refreshing: false,
        loading: false,
        page: 1
      }
    },
    computed: {
      ...mapState(['myRepairs'])
    },
    methods: {
      ...mapActions(['loadRepair']),
      refresh() {
        let self = this;
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        this.loadRepair(1).then(()=> {
          self.refreshing = false
        })
      },
      load() {
        let self = this;
        this.loading = true;
        this.loadRepair(++this.page).then(() => {
          self.loading = false
        })
      },
      color (status) {
        if (status == '已取消') {
          return 'pink'
        } else if (status == '等待中') {
          return 'gray'
        } else if (status == '维修中') {
          return 'orange'
        } else if (status == '待评价') {
          return 'blue'
        } else if (status == '已完成') {
          return 'green'
        }
      }
    },
    created () {
      this.loadRepair(this.page)
    }
  }
</script>

<style scoped>
  .loadmore-content {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 112px);
    overflow: auto;
  }
</style>
